<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
				<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="myApp">
		<h1>{{title}}</h1>
		<span>用户：</span>
		<input type="text" v-model="user.name"/>
		<br>
		<span>性别：</span>
		<input type="radio" value="1" v-model="user.sex"/>男
		<input type="radio" value="0" v-model="user.sex"/>女
		<br>
		<span>民族：</span>
		<select v-model="user.mz">
		    <option value="0">----请选择民族-----</option>
			 <option value="汉族">汉族</option>
			 <option value="苗族">苗族</option>
			 <option value="彝族">彝族</option>
		</select>
		<br>
		<span>备注：</span>
		<!-- 文本域 -->
		<textarea  v-model="user.remark">
		</textarea>
		<br>
		
		<span>爱好：</span>
		<input type="checkbox" value="看电影" v-model="hoby" />看电影
		<input type="checkbox" value="看书" v-model="hoby"/>看书
		<input type="checkbox" value="逛街" v-model="hoby"/>逛街
		<br>
		
		<button type="button">保存</button>
		</div>
	</body>
	<script>
	     new Vue({
			  el:'#myApp',
			  data:{
				  user:{ //表单对象
				  	name:"",
				  	sex:"",
				  	mz:"",
				  	remark:"",
				  	hoby:""
				  	
				  },
				  hoby:[],
				  title:"修改"//弹窗标题
			  },
			  methods:{
				  showData(){
					  this.user =JSON.parse(localStorage.getItem("user"));
				  }
			  },
			  mounted(){
				  this.showData();
			  }
		 })
	</script>
</html>

